<template>
	<div class="basic-setting">
		<div class="title">语音播报</div>
		<el-form label-position="top" :model="settingForm">
			<el-form-item label="语音播报">
				<el-switch
					v-model="settingForm.voiceBroadcast"
					active-text="开启"
					inactive-text="关闭"
					@change="handleVoiceBroadcast"
				>
				</el-switch>
			</el-form-item>
			<el-form-item label="语音播报方式">
				<el-radio
					v-model="settingForm.voiceBroadcastType"
					label="baidu"
					border
					:disabled="!settingForm.voiceBroadcast"
					@change="setVoiceBroadcastType"
					>百度语音</el-radio
				>
				<el-radio
					v-model="settingForm.voiceBroadcastType"
					label="Google"
					border
					:disabled="!settingForm.voiceBroadcast"
					@change="setVoiceBroadcastType"
					>谷歌语音</el-radio
				>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	data() {
		return {
			settingForm: {
				// 语音播报
				voiceBroadcast: localStorage.getItem("voiceBroadcast")
					? !!+localStorage.getItem("voiceBroadcast")
					: true,
				// 语音播报方式
				voiceBroadcastType:
					localStorage.getItem("voiceBroadcastType") || "Google",
			},
		};
	},
	methods: {
		// 语音播报
		handleVoiceBroadcast(val) {
			localStorage.setItem("voiceBroadcast", val ? "1" : "0");
		},

		// 设置语音播报方式
		setVoiceBroadcastType(val) {
			localStorage.setItem("voiceBroadcastType", val);
		},
	},
};
</script>

<style lang="scss"></style>
